<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>结合bootstrap</title>
    <script src="echarts.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
</head>
<body>
    <!--为Echarts准备一个具备大小(宽高)的DOM-->
    <div class="container-fulid">
        <div class="row">
            <div class="col-sm-5">
                <div id="main" style="width: 500px;height: 400px;">     
            </div>
        </div>
    </div>

    
        
    </div>
</body>
<script type="text/javascript">
    //基于准备好的dom初始化echarts实列
    var mychart = echarts.init(document.getElementById("main"))
    //指定图表的配置项和数据
    var option ={
        title:{
            text:"我的第一幅Echarts可视化图"
        },
        tooltip:{},
        legend:{
            data:["各产品销量图"]
        },
        xAxis:{
            data:["产品A","产品B","产品C",'产品D','产品E']
        },
        yAxis:{},
        series:[{
            name:"销量",
            type:'bar',
            data:[900,700,550,1000,200]
        }]
    }
    //使用刚才的配置项与数据显示图表
    mychart.setOption(option)
</script>
</html>